<breadcrumbs></breadcrumbs>

<div class="content-container edit-pkg-screenshots">

    <div
            ng-show="showHelp"
            class="info-container"
            passive-content="editpkgscreenshotshelp.html">
    </div>

    <div class="onelineform-container">
        <form name="addPkgScreenshotForm" novalidate="novalidate">
            <message key="addPkgScreenshot.file.title"></message>
            :
            <input name="file" type="file" ng-model="addPkgScreenshot.file" file-supply required></input>
            <button
                    ng-disabled="addPkgScreenshotForm.$invalid"
                    ng-click="goAddPkgScreenshot()"
                    type="submit"
                    class="main-action">
                <message key="addPkgScreenshot.action.title"></message>
            </button>

            <error-messages key-prefix="addPkgScreenshot.file" error="addPkgScreenshotForm.file.$error" ng-show="!addPkgScreenshotForm.$pristine"></error-messages>

        </form>
    </div>

    <div id="pkg-screenshots-list" ng-model="pkgScreenshots">
        <div ng-repeat="pkgScreenshot in pkgScreenshots">
            <div class="pkg-screenshot-image-container">
                <img ng-src="{{pkgScreenshot.imageThumbnailUrl}}"></img>
                <div class="pkg-screenshot-actions-container" ng-show="pkgScreenshots.length > 1">
                    <a href="" ng-show="0!=$index" ng-click="goOrderUp(pkgScreenshot)"><img src="/img/up.svg"></a>
                    <a href="" ng-show="$index < pkgScreenshots.length-1" ng-click="goOrderDown(pkgScreenshot)"><img src="/img/down.svg"></a>
                </div>
            </div>
            <div class="pkg-screenshot-controls">
                <div><strong>#{{$index+1}}</strong> - ({{pkgScreenshot.width}} x {{pkgScreenshot.height}}), {{pkgScreenshot.length|dataLength}}</div>

                <ul>
                    <li><a href="" ng-click="goRemovePkgScreenshot(pkgScreenshot)"><message key="editPkgScreenshots.remove.title"></message></a></li>
                    <li><a href="{{pkgScreenshot.imageDownloadUrl}}"><message key="editPkgScreenshots.download.title"></message></a></li>
                </ul>
            </div>
            <div style="clear: both;"></div>
        </div>
    </div>

    <ul>
        <li ng-show="!showHelp">
            <a href="" ng-click="goHelp()">
                <message key="gen.help.title"></message>
            </a>
        </li>
    </ul>

</div>

<div class="footer"></div>
<spinner spin="shouldSpin()"></spinner>

